<template>
	<div class="account-task-system">
		<!-- 顶部导航栏 -->
		<el-header class="header">
			<div class="header-content">
				<div class="logo">
					<i class="el-icon-s-platform"></i>
					<span>三角洲接单平台</span>
				</div>

				<!-- 新增功能按钮 -->
				<div class="feature-buttons">
					<el-tooltip content="半价寄快递" placement="bottom">
						<el-button size="small" icon="el-icon-truck" @click="showQRCode('express')" class="feature-btn">
							半价寄快递（上门取件）
						</el-button>
					</el-tooltip>

					<el-tooltip content="免费领全国大流量卡" placement="bottom">
						<el-button size="small" icon="el-icon-sim-card" @click="showQRCode('dataCard')"
							class="feature-btn">
							免费领取流量卡
						</el-button>
					</el-tooltip>

					<el-tooltip content="软件和影视资源" placement="bottom">
						<el-button size="small" icon="el-icon-film" @click="goToResourceSite" class="feature-btn">
							资源站
						</el-button>
					</el-tooltip>

					<el-tooltip content="联系我" placement="bottom">
						<el-button size="small" icon="el-icon-s-promotion" @click="showQRCode('linkMe')"
							class="feature-btn">
							联系我
						</el-button>
					</el-tooltip>
				</div>
				<div class="user-info">
					<span>欢迎, {{ username }}</span>
					<el-button size="small" @click="logout">退出</el-button>
				</div>
			</div>
		</el-header>
		<!-- 游戏类型切换 -->
		<div class="left-sidebar">

			<!-- 游戏类型切换 -->
			<div class="game-type-switcher">
				<div :class="['game-button', currentGameType === 'steam' ? 'active' : '']"
					@click="switchGameType('steam')">
					<i class="el-icon-monitor"></i>
					<span>Steam端游(通道1)</span>
				</div>

				<!-- <div 
                        :class="['game-button', currentGameType === 'qqmobile' ? 'active' : '']"
                        @click="switchGameType('qqmobile')">
                        <i class="el-icon-mobile-phone"></i>
                        <span>QQ手游</span>
                    </div> -->

				<div :class="['game-button', currentGameType === 'steam2' ? 'active' : '']"
					@click="switchGameType('steam2')">
					<i class="el-icon-monitor"></i>
					<span>Steam端游(通道2)</span>
				</div>
				
				<div :class="['game-button', currentGameType === 'steam3' ? 'active' : '']"
					@click="switchGameType('steam3')">
					<i class="el-icon-monitor"></i>
					<span>Steam端游(通道3)</span>
				</div>

				<div :class="['game-button', currentGameType === 'qqmobile' ? 'active' : '']" @click="phoneGame()">
					<i class="el-icon-mobile-phone"></i>
					<span>QQ手游</span>
				</div>
			</div>
		</div>
		<!-- 主要内容 -->
		<el-main class="main-content">
			<el-card class="announcement-card" v-if="announcement.content">
				<div slot="header" class="clearfix announcement-header">
					<span><i class="el-icon-megaphone"></i> 系统公告</span>
					<el-tag v-if="announcement.important" type="danger">重要</el-tag>
				</div>
				<div class="announcement-content">
				  <p style="white-space: pre-line;">{{ announcement.content }}</p>
				  <div class="announcement-time" v-if="announcement.updateTime">
				    更新时间: {{ formatDate(announcement.updateTime) }}
				  </div>
				</div>
			</el-card>


			<!-- 使用指南 -->
			<el-card class="guide-card">
				<!-- <div slot="header" class="clearfix">
          <span><i class="el-icon-info"></i> 使用指南</span>
		  <el-button size="small" @click="Requirements">查看攻略和要求</el-button>
        </div> -->
				<div class="guide-header">
					<div class="header-content">
						<div class="title-section">
							<i class="el-icon-info header-icon"></i>
							<span class="header-title">使用指南 -
								{{ currentGameType === 'steam' ? 'Steam端游(通道1)' : 'Steam端游(通道2)' }}</span>
						</div>
						<div class="button-group">
							<el-button class="guide-button" size="small" @click="screenshot(currentGameType)"
								type="primary" icon="el-icon-camera">
								截图要求
							</el-button>

							<el-button class="guide-button" size="small" @click="Requirements()" type="success"
								icon="el-icon-notebook-2">
								查看攻略(通道1)
							</el-button>
						</div>
					</div>
				</div>
				<div class="guide-steps">
					<el-steps :active="3" align-center>
						<el-step title="领取账号" description="领取您的专属任务账号"></el-step>
						<el-step title="完成任务" description="使用账号完成指定任务"></el-step>
						<el-step title="提交截图" description="上传任务截图和收款码"></el-step>
						<el-step title="等待审核" description="管理员审核后发放报酬"></el-step>
					</el-steps>
				</div>
			</el-card>

			<!-- 账号领取区域 -->
			<el-card class="account-card" v-if="!userAccount">
				<div slot="header" class="clearfix">
					<span><i class="el-icon-user"></i>
						领取{{ currentGameType === 'steam' ? 'Steam端游(通道1)' : 'Steam端游(通道2)' }}账号</span>
				</div>
				<div class="account-content">
					<div class="account-icon">
						<i class="el-icon-key"></i>
					</div>
					<h3>领取您的专属任务{{ currentGameType === 'steam' ? 'Steam端游(通道1)' : 'Steam端游(通道2)' }}账号</h3>
					<p class="tip-text">点击下方按钮领取账号，开始您的任务之旅</p>
					<el-button type="primary" size="large" @click="getAccount" :loading="loadingAccount">
						<i class="el-icon-download"></i> 领取账号
					</el-button>
				</div>
			</el-card>

			<!-- 任务提交区域 -->
			<el-card class="task-card" v-if="userAccount && !submissionComplete">
				<div slot="header" class="clearfix">
					<span><i class="el-icon-upload"></i> 提交任务</span>
				</div>
				<div class="task-content">
					<el-alert :title="'您已成功领取' + (currentGameType === 'steam' ? 'Steam端游(通道1)' : 'Steam端游(通道2)') + '账号'"
						type="info" :closable="false" show-icon>
						<span>{{ currentGameType === 'steam' ? 'Steam端游(通道1)' : 'Steam端游(通道2)' }}账号: <el-tag
								type="success">{{ userAccount.account }}</el-tag></span>
						<span>密码: <el-tag type="success">{{ userAccount.password }}</el-tag></span>
					</el-alert>

					<el-form :model="{ email, level }" :rules="rules" ref="taskForm" class="task-form"
						label-width="120px">
						<!-- 截图上传区域 -->
						<el-form-item label="任务截图:" required>
							<div class="upload-tips">请上传4张任务完成截图</div>
							<div class="screenshot-uploader">
								<div v-for="n in 4" :key="n" class="upload-item"
									@click="triggerUpload(`screenshot${n}`)">
									<input type="file" :ref="`screenshot${n}`" style="display: none"
										@change="handleScreenshotUpload(n, $event)" accept="image/*">

									<div v-if="!screenshots[n-1]" class="upload-area">
										<i class="el-icon-plus"></i>
										<div>截图 {{ n }}</div>
									</div>

									<div v-else class="preview-wrapper">
										<img :src="screenshots[n-1].preview" class="preview-image">
										<div class="file-name">{{ screenshots[n-1].name }}</div>
										<div class="actions">
											<i class="el-icon-view"
												@click.stop="previewImage(screenshots[n-1].preview)"></i>
											<i class="el-icon-delete" @click.stop="removeScreenshot(n)"></i>
										</div>
									</div>
								</div>
							</div>
						</el-form-item>

						<!-- 收款码上传区域 -->
						<el-form-item label="收款码:" required>
							<div class="upload-tips">请上传您的收款码（支付宝/微信）</div>
							<div class="payment-uploader">
								<input type="file" :id="'paymentCodeInput'" style="display: none"
									@change="handlePaymentCodeUpload($event)" accept="image/*">

								<label v-if="!paymentCode" :for="'paymentCodeInput'" class="upload-area large">
									<i class="el-icon-plus"></i>
									<div>点击上传收款码</div>
								</label>

								<div v-else class="preview-wrapper large">
									<img :src="paymentCode.preview" class="preview-image">
									<div class="file-name">{{ paymentCode.name }}</div>
									<div class="actions">
										<i class="el-icon-view" @click.stop="previewImage(paymentCode.preview)"></i>
										<i class="el-icon-delete" @click.stop="removePaymentCode"></i>
									</div>
								</div>

							</div>
						</el-form-item>
						<!-- 邮箱输入区域 -->
						<el-form-item label="邮箱:" prop="email" required class="email-input">
							<el-input v-model="email" placeholder="请输入您的邮箱地址" style="width: 300px">
							</el-input>
							<div class="upload-tips">用于接收任务审核结果和付款通知</div>
						</el-form-item>

						<!-- 等级选择区域 -->
						<el-form-item label="任务等级:" required prop="level" class="level-input">
							<el-radio-group v-model="level">
								<!-- Steam端游的选项 -->
								<template v-if="currentGameType === 'steam'">
									<el-radio label="30">
										30级（35￥）
									</el-radio>
									<el-radio label="33">
										33级（40￥）
									</el-radio>
								</template>

								<!-- Steam2的选项 -->
								<template v-else-if="currentGameType === 'steam2'">
									<el-radio label="30_1000">
										30级1000万（40￥）
									</el-radio>
									<el-radio label="30_1500">
										30级1500万（45￥）
									</el-radio>
									<el-radio label="33_1000">
										33级1000万（50￥）
									</el-radio>
									<el-radio label="33_1500">
										33级1500万（55￥）
									</el-radio>
									<el-radio label="33_2000">
										33级2000万（60￥）
									</el-radio>

								</template>
							</el-radio-group>
							<div v-if="currentGameType === 'steam'" class="upload-tips">请选择您完成的任务等级</div>

						</el-form-item>
						<div class="uid-input-container" style="margin-top: 15px; width: 100%;"
							v-if="currentGameType === 'steam2'">
							<el-form-item label="UID:" prop="uid"
								:rules="currentGameType === 'steam2' ? [{ required: true, message: '请输入UID', trigger: 'blur' }] : []"
								style="margin-bottom: 0;">
								<el-input v-model="uid" placeholder="请输入您的游戏UID" style="width: 300px;"
									:disabled="currentGameType !== 'steam2'">
								</el-input>
								<div class="upload-tips" style="margin-top: 5px;">Steam2任务需要提供游戏UID</div>
							</el-form-item>

						</div>
						<el-button type="primary" @click="submitTask" :disabled="!canSubmit" :loading="submitting">
							<i class="el-icon-s-promotion"></i> 提交任务
						</el-button>
						</el-form-item>
					</el-form>
				</div>
			</el-card>


			<!-- 提交历史 -->
			<el-card class="history-card">
				<div slot="header" class="clearfix">
					<span><i class="el-icon-notebook-2"></i> 提交历史</span>
				</div>

				<el-table :data="submissions" style="width: 100%" v-loading="loadingHistory">
					<el-table-column prop="submitTime" label="提交时间" width="180">
						<template slot-scope="scope">
							{{ formatDate(scope.row.submitTime) }}
						</template>
					</el-table-column>
					<el-table-column prop="account" label="账号" width="150"></el-table-column>
					<el-table-column prop="status" label="状态" width="120">
						<template slot-scope="scope">
							<el-tag :type="getStatusType(scope.row.status)">
								{{ getStatusText(scope.row.status) }}
							</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="120">
						<template slot-scope="scope">
							<el-button size="mini" @click="viewSubmission(scope.row)">
								查看详情
							</el-button>
						</template>
					</el-table-column>
				</el-table>

				<div v-if="submissions.length === 0" class="empty-history">
					<i class="el-icon-document"></i>
					<p>暂无提交记录</p>
				</div>
			</el-card>

			<!-- 提交详情对话框 -->
			<el-dialog title="提交详情" :visible.sync="detailDialogVisible" width="80%">
				<div v-if="currentSubmission" class="submission-detail">
					<div class="detail-section">
						<h4>基本信息</h4>
						<el-row :gutter="20">
							<el-col :span="12">
								<p><strong>提交时间:</strong> {{ formatDate(currentSubmission.submitTime) }}</p>
							</el-col>
							<el-col :span="12">
								<p><strong>{{ currentGameType === 'steam' ? 'Steam通道(1)端游' : 'Steam通道(2)端游' }}账号:</strong>
									<el-tag>{{ currentSubmission.account }}</el-tag>
									<strong>密码:</strong>
									<el-tag>{{ currentSubmission.passWord }}</el-tag>
								</p>
								
								
							</el-col>
							<!-- <el-col :span="12">
								<p><strong>邮箱:</strong> <el-tag>{{ currentSubmission.email }}</el-tag></p>
							</el-col> -->
							<el-col :span="12">
								<p><strong>提交等级:</strong> <el-tag>{{ currentSubmission.level }}</el-tag></p>
							</el-col>
							<el-col :span="12">
								<p><strong>状态:</strong>
									<el-tag :type="getStatusType(currentSubmission.status)">
										{{ getStatusText(currentSubmission.status) }}
									</el-tag>
								</p>
							</el-col>
							<el-col :span="12" v-if="currentSubmission.status === 'rejected'">
								<p><strong>拒绝原因:</strong>
									<span style="color: #f56c6c;">{{ currentSubmission.rejectReason || '无备注信息' }}</span>
								</p>
							</el-col>
						</el-row>

						<!-- 重新提交按钮 -->
						<el-row :gutter="20" v-if="currentSubmission.status === 'rejected'">
							<el-col :span="24">
								<div style="margin-top: 20px; text-align: center;">
									<el-button type="primary" icon="el-icon-refresh" @click="handleResubmit"
										:loading="resubmitting">
										重新提交任务
									</el-button>
									<el-button type="warning" icon="el-icon-chat-dot-round"
										@click="showRejectReasonDialog">
										查看拒绝详情
									</el-button>
								</div>
							</el-col>
						</el-row>
					</div>

					<!-- 拒绝原因对话框 -->
					<el-dialog title="拒绝原因详情" :visible.sync="rejectReasonDialogVisible" width="50%">
						<div v-if="currentSubmission">
							<el-alert title="任务被拒绝" type="error"
								:description="currentSubmission.rejectReason || '管理员未提供具体拒绝原因'" show-icon
								:closable="false">
							</el-alert>
							<div style="margin-top: 20px;">
								<p><strong>提交账号:</strong> {{ currentSubmission.account }}</p>
								<p><strong>提交时间:</strong> {{ formatDate(currentSubmission.submitTime) }}</p>
								<!-- <p><strong>拒绝时间:</strong> {{ formatDate(currentSubmission.reviewTime) }}</p> -->
							</div>
						</div>
						<span slot="footer" class="dialog-footer">
							<el-button @click="rejectReasonDialogVisible = false">关闭</el-button>
							<el-button type="primary" @click="handleResubmit">重新提交</el-button>
						</span>
					</el-dialog>

					<!-- 重新提交对话框 -->
					<el-dialog title="重新提交任务" :visible.sync="resubmitDialogVisible" width="70%"
						:before-close="handleResubmitClose">
						<el-form :model="resubmitData" :rules="resubmitRules" ref="resubmitForm" label-width="100px"
							v-if="currentSubmission">
							<el-alert title="请重新提交任务截图和收款码" type="info" description="之前的提交已被拒绝，请根据拒绝原因修改后重新提交" show-icon
								style="margin-bottom: 20px;">
							</el-alert>

							<el-form-item :label="currentGameType === 'steam' ? 'Steam(通道1)端游账号信息' : 'Steam(通道2)端游账号信息'">
								<el-tag type="info">{{ currentSubmission.account }}</el-tag>
								<span
									style="margin-left: 10px; color: #909399;">请使用此{{ currentGameType === 'steam' ? 'Steam(通道1)端游' : 'Steam(通道2)端游' }}账号完成任务</span>
							</el-form-item>

							<el-form-item label="任务截图" required>
								<div class="upload-tips">请重新上传4张任务完成截图</div>
								<div class="screenshot-uploader">
									<div v-for="n in 4" :key="n" class="upload-item"
										@click="triggerResubmitUpload(`screenshot${n}`)">
										<input type="file" :ref="`resubmitScreenshot${n}`" style="display: none"
											@change="handleResubmitScreenshotUpload(n, $event)" accept="image/*">

										<div v-if="!resubmitScreenshots[n-1]" class="upload-area">
											<i class="el-icon-plus"></i>
											<div>截图 {{ n }}</div>
										</div>

										<div v-else class="preview-wrapper">
											<img :src="resubmitScreenshots[n-1].preview" class="preview-image">
											<div class="file-name">{{ resubmitScreenshots[n-1].name }}</div>
											<div class="actions">
												<i class="el-icon-view"
													@click.stop="previewImage(resubmitScreenshots[n-1].preview)"></i>
												<i class="el-icon-delete" @click.stop="removeResubmitScreenshot(n)"></i>
											</div>
										</div>
									</div>
								</div>
							</el-form-item>

							<el-form-item label="收款码" required>
								<div class="upload-tips">请重新上传收款码</div>
								<div class="payment-uploader">
									<input type="file" id="resubmitPaymentCodeInput" style="display: none"
										@change="handleResubmitPaymentCodeUpload($event)" accept="image/*">

									<label v-if="!resubmitPaymentCode" for="resubmitPaymentCodeInput"
										class="upload-area large">
										<i class="el-icon-plus"></i>
										<div>点击上传收款码</div>
									</label>

									<div v-else class="preview-wrapper large">
										<img :src="resubmitPaymentCode.preview" class="preview-image">
										<div class="file-name">{{ resubmitPaymentCode.name }}</div>
										<div class="actions">
											<i class="el-icon-view"
												@click.stop="previewImage(resubmitPaymentCode.preview)"></i>
											<i class="el-icon-delete" @click.stop="removeResubmitPaymentCode"></i>
										</div>
									</div>
								</div>
							</el-form-item>
							<!-- 邮箱输入区域 -->
							<el-form-item label="邮箱:" prop="email" required class="email-input">
								<el-input v-model="resubmitData.email" placeholder="请输入您的邮箱地址" style="width: 300px">
								</el-input>
								<div class="upload-tips">用于接收任务审核结果和付款通知</div>
							</el-form-item>

							<!-- 等级选择区域 -->
							<!-- 等级选择区域 -->
							<el-form-item label="任务等级:" required prop="level" class="level-input">
								<el-radio-group v-model="resubmitData.level">
									<!-- Steam端游的选项 -->
									<template v-if="currentGameType === 'steam'">
										<el-radio label="30">
											30级（35￥）
										</el-radio>
										<el-radio label="33">
											33级（40￥）
										</el-radio>
									</template>
							
									<!-- Steam2的选项 -->
									<template v-else-if="currentGameType === 'steam2'">
										<el-radio label="30_1000">
											30级1000万（40￥）
										</el-radio>
										<el-radio label="30_1500">
											30级1500万（45￥）
										</el-radio>
										<el-radio label="33_1000">
											33级1000万（50￥）
										</el-radio>
										<el-radio label="33_1500">
											33级1500万（55￥）
										</el-radio>
										<el-radio label="33_2000">
											33级2000万（60￥）
										</el-radio>
							
									</template>
								</el-radio-group>
							
									<div v-if="currentGameType === 'steam'" class="upload-tips">请选择您完成的任务等级</div>
								
								
							
							</el-form-item>
							<div class="uid-input-container" style="margin-top: 15px; width: 100%;"
								v-if="currentGameType === 'steam2'">
								<el-form-item label="UID:" prop="uid"
									:rules="currentGameType === 'steam2' ? [{ required: true, message: '请输入UID', trigger: 'blur' }] : []"
									style="margin-bottom: 0;">
									<el-input v-model="resubmitData.uid" placeholder="请输入您的游戏UID" style="width: 300px;"
										:disabled="currentGameType !== 'steam2'">
									</el-input>
									<div class="upload-tips" style="margin-top: 5px;">Steam2任务需要提供游戏UID</div>
								</el-form-item>
							
							</div>
							<el-form-item label="拒绝原因" v-if="currentSubmission.rejectReason">
								<el-alert :title="currentSubmission.rejectReason" type="warning"
									:closable="false"></el-alert>
							</el-form-item>

						</el-form>

						<span slot="footer" class="dialog-footer">
							<el-button @click="resubmitDialogVisible = false">取消</el-button>
							<el-button type="primary" @click="submitResubmit" :disabled="!canResubmit"
								:loading="resubmitting">
								提交审核
							</el-button>
						</span>
					</el-dialog>

					<div class="detail-section">
						<h4>任务截图</h4>
						<el-row :gutter="20">
							<el-col :span="12" :md="8" :lg="6"
								v-for="(screenshotPath, index) in currentSubmission.screenshotPaths" :key="index">
								<div class="screenshot-item">
									<el-image :src="getImageUrl(screenshotPath)"
										:preview-src-list="getPreviewList(currentSubmission.screenshotPaths)"
										fit="cover" style="width: 100%; height: 150px;" :preview-teleported="true">
										<div slot="error" class="image-slot">
											<i class="el-icon-picture-outline"></i>
											<p>加载失败</p>
										</div>
										<div slot="placeholder" class="image-placeholder">
											<i class="el-icon-loading"></i>
											<p>加载中...</p>
										</div>
									</el-image>
									<div class="screenshot-label">截图 {{ index + 1 }}</div>
								</div>
							</el-col>
						</el-row>
					</div>

					<div class="detail-section">
						<h4>收款码</h4>
						<div class="payment-code">
							<el-image :src="getImageUrl(currentSubmission.paymentCodePath)" fit="contain"
								style="max-width: 300px; max-height: 300px; display: block; margin: 0 auto; border: 1px solid #eee; padding: 10px;"
								:preview-src-list="[getImageUrl(currentSubmission.paymentCodePath)]"
								:preview-teleported="true">
								<div slot="error" class="image-slot">
									<i class="el-icon-picture-outline"></i>
									<p>收款码加载失败</p>
								</div>
								<div slot="placeholder" class="image-placeholder">
									<i class="el-icon-loading"></i>
									<p>加载中...</p>
								</div>
							</el-image>
						</div>
					</div>
				</div>
			</el-dialog>
		</el-main>
		<el-dialog :title="qrDialogTitle" :visible.sync="qrDialogVisible" width="300px" center>
			<div class="qr-code-dialog">
				<img :src="currentQRCode" class="qr-image">
				<p class="qr-tip">{{ qrDialogTip }}</p>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import requests from '@/utils/request';
	export default {
		name: 'AccountTaskSystem',
		data() {
			// 邮箱验证规则
			const validateEmail = (rule, value, callback) => {
				if (!value) {
					callback(new Error('请输入邮箱地址'));
				} else {
					const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
					if (!emailRegex.test(value)) {
						callback(new Error('请输入有效的邮箱地址'));
					} else {
						callback();
					}
				}
			};
			// 等级验证规则
			const validateLevel = (rule, value, callback) => {
				if (!value) {
					callback(new Error('请选择任务等级'));
				} else {
					callback();
				}
			};
			return {
				resubmitData: {
					email: '',
					level: ''
				},
				resubmitRules: {
					email: [{
						required: true,
						validator: validateEmail,
						trigger: 'blur'
					}],
					level: [{
						required: true,
						validator: validateLevel,
						trigger: 'change'
					}],
					uid: [{
						required: true,
						message: '请输入游戏UID',
						trigger: 'blur',
						validator: (rule, value, callback) => {
							// 只有在steam2模式下才验证UID
							if (this.currentGameType === 'steam2' && !value) {
								callback(new Error('请输入游戏UID'));
							} else {
								callback();
							}
						}
					}]
				},
				rules: {
					email: [{
						required: true,
						validator: validateEmail,
						trigger: 'blur'
					}],
					level: [{
							required: true,
							validator: validateLevel,
							trigger: 'change'
						} // 只在change时验证
					],
					uid: [{
						required: true,
						message: '请输入游戏UID',
						trigger: 'blur',
						validator: (rule, value, callback) => {
							// 只有在steam2模式下才验证UID
							if (this.currentGameType === 'steam2' && !value) {
								callback(new Error('请输入游戏UID'));
							} else {
								callback();
							}
						}
					}]

				},

				username: localStorage.getItem('username') || '用户',
				userAccount: null,
				screenshots: [null, null, null, null],
				paymentCode: null,
				submissions: [],
				currentSubmission: null,
				submissionComplete: false,
				detailDialogVisible: false,
				email: '',
				level: '',
				reEmail: '',
				reLevel: '',
				loadingAccount: false,
				submitting: false,
				loadingHistory: false,
				rejectReasonDialogVisible: false,
				resubmitDialogVisible: false,
				resubmitting: false,
				resubmitScreenshots: [null, null, null, null],
				resubmitPaymentCode: null,
				resubmitForm: {
					submissionId: null,
					screenshots: [],
					paymentCode: null,
					level: '', // 添加等级字段,
					uid:'',
				},
				// 新增数据
				qrDialogVisible: false,
				currentQRCode: '',
				qrDialogTitle: '',
				qrDialogTip: '',

				// 二维码图片路径 - 请替换为实际路径
				expressQRCode: './img/express.jpg',
				dataCardQRCode: './img/dataCard.jpg',
				linkMeQRCode: './img/linkMe.jpg',
				currentGameType: 'steam',
				announcement: {
					content: '',
					important: false,
					updateTime: null
				},
				announcementInterval: null,
				uid: '',
			}

		},
		computed: {
			canSubmit() {
				const basicCondition = this.screenshots.every(s => s !== null) &&
					this.paymentCode !== null &&
					this.email &&
					this.level;
				console.log("basicCondition",basicCondition)

				// 如果是steam2，还需要验证UID
				if (this.currentGameType === 'steam2') {
					return basicCondition && this.uid;
				}
				return basicCondition;
				
			},
			canResubmit() {
				const basicCondition=this.resubmitScreenshots.every(s => s !== null) && this.resubmitPaymentCode !== null &&
					this.resubmitData.email && this.resubmitData.level
					console.log("basicCondition",basicCondition)
				if (this.currentGameType === 'steam2') {
					return basicCondition && this.resubmitData.uid;
				}
				return basicCondition;
			}
		},

		mounted() {
			this.loadUserData();
			this.loadAnnouncement(); // 加载公告
			// 每5分钟刷新一次公告
			this.announcementInterval = setInterval(() => {
				this.loadAnnouncement();
			}, 5 * 60 * 1000);
		},
		beforeDestroy() {
			// 清除定时器
			if (this.announcementInterval) {
				clearInterval(this.announcementInterval);
			}
		},
		methods: {
			// 加载公告
			async loadAnnouncement() {
				try {
					const response = await requests.get('/api/announcement');
					if (response.code === 200) {
						this.announcement = response.data;
					}
				} catch (error) {
					console.error('获取公告失败', error);
				}
			},
			switchGameType(type) {

				this.currentGameType = type;
				this.loadUserData();
			},

			showQRCode(type) {
				if (type === 'express') {
					this.currentQRCode = this.expressQRCode;
					this.qrDialogTitle = '半价寄快递';
					this.qrDialogTip = '微信扫码享受半价寄件服务';
				} else if (type === 'dataCard') {
					this.currentQRCode = this.dataCardQRCode;
					this.qrDialogTitle = '免费领流量卡';
					this.qrDialogTip = '扫码免费领取全国大流量卡';
				} else if (type === 'linkMe') {
					this.currentQRCode = this.linkMeQRCode;
					this.qrDialogTitle = '联系我';
					this.qrDialogTip = '微信扫码添加好友';
				}
				this.qrDialogVisible = true;
			},

			goToResourceSite() {
				window.open('https://www.kdocs.cn/l/cmb4wd84zDLr', '_blank');
			},
			phoneGame() {
				window.open('https://q0u7jqc93gt.feishu.cn/wiki/ESdgwfaiHiH9IZkcKGzcLvHYnff?from=from_copylink', '_blank');
			},
			getImageUrl(path) {
				if (!path) return '';

				// 处理路径中的反斜杠并编码
				const normalizedPath = path.replace(/\\/g, '/')
					.split('/')
					.map(segment => encodeURIComponent(segment))
					.join('/');

				if (this.currentGameType === 'steam') {
					return `http://localhost:8088/api/files/steam/${normalizedPath}`;
					// return `http://3.101.150.9:8088/api/files/steam/${normalizedPath}`;
				} else {
					return `http://localhost:8088/api/files/qq/${normalizedPath}`;
					// return `http://3.101.150.9:8088/api/files/qq/${normalizedPath}`;
				}
			},
			// 获取预览图片列表
			getPreviewList(paths) {
				if (!paths || !Array.isArray(paths)) return [];
				return paths.map(path => this.getImageUrl(path)).filter(url => url);
			},
			Requirements() {
				// 跳转到指定网页
				window.open('https://q0u7jqc93gt.feishu.cn/wiki/RoVfwoLQXiZaiekgDtccj21snmh', '_blank');


				// 或者使用下面这种方式在当前页面打开
				// window.location.href = 'https://example.com/guide';
			},
			screenshot(type) {
				if (type === 'steam') {
					// 跳转到指定网页
					window.open('https://q0u7jqc93gt.feishu.cn/wiki/ESjewnJ1eiU6zkk0U5pcApB8n5f', '_blank');
				} else {
					window.open('https://q0u7jqc93gt.feishu.cn/wiki/IzOswqg2LiLYnMkqY1dcUAnfnAb?from=from_copylink', '_blank');
				}

			},
			// 显示拒绝原因对话框
			showRejectReasonDialog() {
				this.rejectReasonDialogVisible = true;
			},

			// 处理重新提交
			handleResubmit() {
				this.resubmitDialogVisible = true;
				// 初始化重新提交表单
				this.resubmitForm.submissionId = this.currentSubmission.id;
				this.resubmitScreenshots = [null, null, null, null];
				this.resubmitPaymentCode = null;
				this.resubmitData = {
					email: '',
					level: ''
				};
			},

			// 触发重新提交文件上传
			triggerResubmitUpload(ref) {
				this.$refs[`resubmit${ref.charAt(0).toUpperCase() + ref.slice(1)}`][0].click();
			},

			// 处理重新提交截图上传
			handleResubmitScreenshotUpload(index, event) {
				const file = event.target.files[0];
				if (file) {
					if (!file.type.startsWith('image/')) {
						this.$message.error('请上传图片文件');
						return;
					}

					if (file.size > 5 * 1024 * 1024) {
						this.$message.error('图片大小不能超过5MB');
						return;
					}

					const reader = new FileReader();
					reader.onload = (e) => {
						this.$set(this.resubmitScreenshots, index - 1, {
							name: file.name,
							file: file,
							preview: e.target.result
						});
					};
					reader.readAsDataURL(file);
				}
			},

			// 处理重新提交收款码上传
			handleResubmitPaymentCodeUpload(event) {
				const file = event.target.files[0];
				if (file) {
					if (!file.type.startsWith('image/')) {
						this.$message.error('请上传图片文件');
						return;
					}

					if (file.size > 5 * 1024 * 1024) {
						this.$message.error('图片大小不能超过5MB');
						return;
					}

					const reader = new FileReader();
					reader.onload = (e) => {
						this.resubmitPaymentCode = {
							name: file.name,
							file: file,
							preview: e.target.result
						};
					};
					reader.readAsDataURL(file);
				}
			},

			// 移除重新提交截图
			removeResubmitScreenshot(index) {
				this.$set(this.resubmitScreenshots, index - 1, null);
			},

			// 移除重新提交收款码
			removeResubmitPaymentCode() {
				this.resubmitPaymentCode = null;
			},

			// 重新提交对话框关闭前的处理
			handleResubmitClose(done) {
				this.$confirm('确定要取消重新提交吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					done();
				}).catch(() => {});
			},

			// 提交重新审核
			async submitResubmit() {
				try {
					// 添加邮箱验证
					if (!this.resubmitData.email) {
						this.$message.error('请输入邮箱地址');
						return;
					}

					// 邮箱格式验证
					const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
					if (!emailRegex.test(this.resubmitData.email)) {
						this.$message.error('请输入有效的邮箱地址');
						return;
					}
					
					// 验证UID（如果是steam2）
					if (this.currentGameType === 'steam2' && !this.resubmitData.uid) {
						this.$message.error('请输入游戏UID');
						return;
					}
					this.resubmitting = true;

					const formData = new FormData();
					formData.append('submissionId', this.resubmitForm.submissionId);
					
					// 添加截图
					this.resubmitScreenshots.forEach((screenshot, index) => {
						formData.append('screenshots', screenshot.file);
					});
					// 添加邮箱（使用resubmitData.email）
					formData.append('email', this.resubmitData.email);
					// 添加等级（使用resubmitData.level）
					formData.append('level', this.resubmitData.level);
					// 添加收款码
					formData.append('paymentCode', this.resubmitPaymentCode.file);
					if(this.currentGameType === 'steam2'){
						formData.append('uid', this.resubmitData.uid);
					}
					let response = null;
					if (this.currentGameType === 'steam') {
						response = await requests.post('/api/user/resubmit-task', formData, {
							headers: {
								'Content-Type': 'multipart/form-data'
							}
						});
					} else {
						response = await requests.post('/api/user/resubmit-qq-task', formData, {
							headers: {
								'Content-Type': 'multipart/form-data'
							}
						});
					}

					if (response.code === 200) {
						this.$message.success('重新提交成功，等待管理员审核');
						this.resubmitDialogVisible = false;

						// 刷新数据
						this.loadUserData();
						this.detailDialogVisible = false;
					} else {
						this.$message.error(response.msg || '重新提交失败');
					}
				} catch (error) {
					this.$message.error('重新提交失败: ' + (error.response?.data?.message || error.message));
				} finally {
					this.resubmitting = false;
					this.submissionComplete = true;
					this.screenshots = [null, null, null, null];
					this.paymentCode = null;
					this.email = '';
					this.level = ''; // 重置等级选择
					this.uid = '';
				}
			},
			async loadUserData() {
				try {
					// this.currentGameType=localStorage.getItem("gameType");
					this.loadingHistory = true;
					// {
					if (this.currentGameType === 'steam') {
						// if(localStorage.getItem("gameType")==='steam'){
						// 获取用户账号信息 - 使用您的requests实例
						const accountResponse = await requests.get('/api/user/account');
						if (accountResponse.code === 90002) {
							this.$message.error('登录失效，请重新登录');
							localStorage.removeItem('token');
							localStorage.removeItem('username');
							localStorage.removeItem('id');
							this.$router.push('/login');
						} else {
							this.userAccount = accountResponse.data;

							// 获取提交历史 - 使用您的requests实例
							const submissionsResponse = await requests.get('/api/user/submissions');
							this.submissions = submissionsResponse.data;
						}
					} else {
						// 获取用户账号信息 - 使用您的requests实例
						const accountResponse = await requests.get('/api/user/qq-account');
						if (accountResponse.code === 90002) {
							this.$message.error('登录失效，请重新登录');
							localStorage.removeItem('token');
							localStorage.removeItem('username');
							localStorage.removeItem('id');
							this.$router.push('/login');
						} else {
							this.userAccount = accountResponse.data;

							// 获取提交历史 - 使用您的requests实例
							const submissionsResponse = await requests.get('/api/user/qq-submissions');
							this.submissions = submissionsResponse.data;
						}
					}



				} catch (error) {
					console.error('加载用户数据失败', error);
					this.$message.error('加载数据失败');
				} finally {
					this.loadingHistory = false;
				}
			},

			async getAccount() {
				try {
					this.loadingAccount = true;
					if (this.currentGameType === 'steam') {
						// 使用您的requests实例
						const response = await requests.post('/api/user/get-account');
						this.userAccount = response.data;
						this.$message.success('账号领取成功: ' + this.userAccount.account);
						// localStorage.setItem("gameType",'steam');
					} else {
						const response = await requests.post('/api/user/get-qq-account');
						this.userAccount = response.data;
						this.$message.success('账号领取成功: ' + this.userAccount.account);
						// localStorage.setItem("gameType",'steam2');
					}
				} catch (error) {
					this.$message.error('领取账号失败: ' + (error.response?.data?.message || error.message));
				} finally {
					this.loadingAccount = false;
					localStorage.setItem("gameType", this.currentGameType);
					// location.reload();
					this.resetTaskForm();
				}
			},
			resetTaskForm() {
				this.screenshots = [null, null, null, null];
				this.paymentCode = null;
				this.email = '';
				this.level = '';
				this.submissionComplete = false;

				// 如果需要重新加载用户数据（如提交历史）
				this.loadUserData();
			},
			async submitTask() {
				try {
					// 添加邮箱验证
					if (!this.email) {
						this.$message.error('请输入邮箱地址');
						return;
					}
					// 验证UID（如果是steam2）
					if (this.currentGameType === 'steam2' && !this.uid) {
						this.$message.error('请输入游戏UID');
						return;
					}
					// 邮箱格式验证
					const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
					if (!emailRegex.test(this.email)) {
						this.$message.error('请输入有效的邮箱地址');
						return;
					}
					this.submitting = true;
					const formData = new FormData();

					// 添加截图
					this.screenshots.forEach((screenshot, index) => {
						formData.append('screenshots', screenshot.file);
					});

					// 添加收款码
					formData.append('paymentCode', this.paymentCode.file);
					// 添加邮箱
					formData.append('email', this.email);
					// 添加等级
					formData.append('level', this.level);
					// 如果是steam2，添加UID
					    if (this.currentGameType === 'steam2') {
					      formData.append('uid', this.uid);
					    }
					// 使用您的requests实例
					let response = null;;
					if (this.currentGameType === 'steam') {
						response = await requests.post('/api/user/submit-task', formData, {
							headers: {
								'Content-Type': 'multipart/form-data'
							}
						});
					} else {
						response = await requests.post('/api/user/submit-qq-task', formData, {
							headers: {
								'Content-Type': 'multipart/form-data'
							}
						});
					}
					this.submissionComplete = true;
					this.screenshots = [null, null, null, null];
					this.paymentCode = null;
					this.email = '';
					this.level = ''; // 重置等级选择
					this.uid = ''; // 重置UID
					// 刷新提交历史
					await this.loadUserData();

					this.$message.success('任务提交成功！');
				} catch (error) {
					this.$message.error('提交失败: ' + (error.response?.data?.message || error.message));
				} finally {
					this.submitting = false;
					location.reload();
				}
			},
			triggerUpload(ref) {
				this.$refs[ref][0].click();
			},
			handleScreenshotUpload(index, event) {
				const file = event.target.files[0];
				if (file) {
					if (!file.type.startsWith('image/')) {
						this.$message.error('请上传图片文件');
						return;
					}

					if (file.size > 5 * 1024 * 1024) {
						this.$message.error('图片大小不能超过10MB');
						return;
					}

					const reader = new FileReader();
					reader.onload = (e) => {
						this.$set(this.screenshots, index - 1, {
							name: file.name,
							file: file,
							preview: e.target.result
						});
					};
					reader.readAsDataURL(file);
				}
			},
			handlePaymentCodeUpload(event) {
				const file = event.target.files[0];
				if (file) {
					if (!file.type.startsWith('image/')) {
						this.$message.error('请上传图片文件');
						return;
					}

					if (file.size > 5 * 1024 * 1024) {
						this.$message.error('图片大小不能超过10MB');
						return;
					}

					const reader = new FileReader();
					reader.onload = (e) => {
						this.paymentCode = {
							name: file.name,
							file: file,
							preview: e.target.result
						};
					};
					reader.readAsDataURL(file);
				}
			},
			removeScreenshot(index) {
				this.$set(this.screenshots, index - 1, null);
			},
			removePaymentCode() {
				this.paymentCode = null;
			},
			previewImage(url) {
				// 使用Element UI的图片预览功能
				this.$alert(`<img src="${url}" style="max-width: 100%;">`, '图片预览', {
					dangerouslyUseHTMLString: true,
					customClass: 'image-preview-modal'
				});
			},
			// async submitTask() {
			//   try {
			//     this.submitting = true;
			//     const formData = new FormData();

			//     // 添加截图
			//     this.screenshots.forEach((screenshot, index) => {
			//       formData.append('screenshots', screenshot.file);
			//     });

			//     // 添加收款码
			//     formData.append('paymentCode', this.paymentCode.file);

			//     const response = await this.$http.post('/api/user/submit-task', formData, {
			//       headers: { 
			//         'Authorization': `Bearer ${localStorage.getItem('token')}`,
			//         'Content-Type': 'multipart/form-data'
			//       }
			//     });

			//     this.submissionComplete = true;
			//     this.screenshots = [null, null, null, null];
			//     this.paymentCode = null;

			//     // 刷新提交历史
			//     await this.loadUserData();

			//     this.$message.success('任务提交成功！');
			//   } catch (error) {
			//     this.$message.error('提交失败: ' + (error.response?.data?.message || error.message));
			//   } finally {
			//     this.submitting = false;
			//   }
			// },
			viewSubmission(submission) {
				this.currentSubmission = submission;
				this.detailDialogVisible = true;
			},
			formatDate(dateString) {
				return new Date(dateString).toLocaleString();
			},
			getStatusText(status) {
				const statusMap = {
					'pending': '审核中',
					'approved': '已通过',
					'rejected': '已拒绝',
					'paid': '已支付'
				};
				return statusMap[status] || status;
			},
			getStatusType(status) {
				const typeMap = {
					'pending': 'warning',
					'approved': 'success',
					'rejected': 'danger',
					'paid': 'primary'
				};
				return typeMap[status] || 'info';
			},
			logout() {
				localStorage.removeItem('token');
				localStorage.removeItem('username');
				localStorage.removeItem('id');
				this.$router.push('/login');
			}
		}
	}
</script>

<style>
	.account-task-system {
		min-height: 100vh;
		background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
		padding-top: 60px;
	}

	.header {
		background: linear-gradient(to right, #39e274, #9c27b0);
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 2000;
		/* 比侧边栏更高 */
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}

	.header-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 60px;
	}

	.logo {
		display: flex;
		align-items: center;
		color: white;
		font-size: 20px;
		font-weight: bold;
	}

	.logo i {
		font-size: 24px;
		margin-right: 10px;
	}

	.user-info {
		display: flex;
		align-items: center;
		color: white;
	}

	.user-info span {
		margin-right: 15px;
	}

	.main-content {
		padding: 20px;
		max-width: 1200px;
		margin: 0 auto;
	}

	.guide-card,
	.account-card,
	.task-card,
	.success-card,
	.history-card {
		margin-bottom: 20px;
		border-radius: 8px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}

	.account-content {
		text-align: center;
		padding: 30px 0;
	}

	.account-icon {
		font-size: 48px;
		color: #39e274;
		margin-bottom: 15px;
	}

	.tip-text {
		color: #909399;
		margin: 15px 0;
	}

	.task-content {
		padding: 10px 0;
	}

	.upload-tips {
		color: #909399;
		font-size: 13px;
		margin-bottom: 10px;
	}

	.screenshot-uploader {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 15px;
		margin-bottom: 20px;
	}

	.upload-item {
		cursor: pointer;
	}

	.upload-area {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		padding: 20px;
		text-align: center;
		transition: border-color 0.3s;
		height: 120px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.upload-area.large {
		height: 180px;
	}

	.upload-area:hover {
		border-color: #39e274;
	}

	.upload-area i {
		font-size: 28px;
		color: #8c939d;
		margin-bottom: 10px;
	}

	.preview-wrapper {
		position: relative;
		border: 1px solid #d9d9d9;
		border-radius: 6px;
		padding: 8px;
		height: 120px;
	}

	.preview-wrapper.large {
		height: 180px;
	}

	.preview-image {
		width: 100%;
		height: 80px;
		object-fit: contain;
	}

	.preview-wrapper.large .preview-image {
		height: 120px;
	}

	.file-name {
		font-size: 12px;
		color: #606266;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-top: 5px;
	}

	.actions {
		position: absolute;
		top: 5px;
		right: 5px;
		display: none;
	}

	.preview-wrapper:hover .actions {
		display: block;
	}

	.actions i {
		margin-left: 5px;
		cursor: pointer;
		color: #fff;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 50%;
		padding: 3px;
	}

	.payment-uploader {
		cursor: pointer;
		max-width: 300px;
	}

	.success-content {
		text-align: center;
		padding: 40px 0;
	}

	.success-icon {
		font-size: 60px;
		color: #67c23a;
		margin-bottom: 20px;
	}

	.success-tip {
		color: #606266;
		margin: 20px 0;
	}

	.empty-history {
		text-align: center;
		padding: 40px 0;
		color: #909399;
	}

	.empty-history i {
		font-size: 60px;
		margin-bottom: 15px;
	}

	.detail-section {
		margin-bottom: 30px;
	}

	.detail-section h4 {
		margin-bottom: 15px;
		color: #303133;
		border-left: 4px solid #39e274;
		padding-left: 10px;
	}

	.screenshot-item {
		margin-bottom: 15px;
	}

	.screenshot-label {
		text-align: center;
		margin-top: 5px;
		font-size: 12px;
		color: #606266;
	}

	.payment-code {
		text-align: center;
	}

	.image-slot {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		background: #f5f7fa;
		color: #909399;
	}

	.image-slot i {
		font-size: 30px;
	}

	@media (max-width: 768px) {
		.main-content {
			padding: 10px;
		}

		.screenshot-uploader {
			grid-template-columns: repeat(2, 1fr);
		}

		.header-content {
			padding: 0 10px;
		}

		.user-info span {
			display: none;
		}
	}

	.guide-header {
		background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
		border-radius: 8px;
		padding: 0px 20px;
		border-left: 4px solid #409EFF;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
	}

	.header-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.title-section {
		display: flex;
		align-items: center;
	}

	.header-icon {
		font-size: 18px;
		color: #409EFF;
		margin-right: 8px;
	}

	.header-title {
		font-size: 16px;
		font-weight: 600;
		color: #303133;
	}

	.guide-button {
		background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
		border: none;
		border-radius: 4px;
		padding: 8px 15px;
		color: white;
		font-weight: 500;
		box-shadow: 0 2px 6px rgba(64, 158, 255, 0.3);
		transition: all 0.3s ease;
	}

	.guide-button:hover {
		background: linear-gradient(135deg, #66b1ff 0%, #409EFF 100%);
		box-shadow: 0 4px 8px rgba(64, 158, 255, 0.4);
		transform: translateY(-1px);
	}

	.guide-button:active {
		transform: translateY(0);
	}

	/* 等级选择样式 */
	.level-input .el-radio-group {
		display: flex;
		gap: 20px;
	}

	.level-input .el-radio {
		margin-right: 0;
	}

	/* 响应式调整 */
	@media (max-width: 768px) {
		.level-input .el-radio-group {
			flex-direction: column;
			gap: 10px;
		}
	}

	/* 调整等级选择器的对齐 */
	.level-input .el-form-item__content {
		display: flex;
		align-items: flex-start;
	}

	.level-input .el-radio-group {
		margin-top: 2px;
		/* 微调对齐 */
	}

	/* 或者更精确的对齐调整 */
	.level-input .el-form-item__label {
		line-height: 32px;
		/* 与单选框高度对齐 */
	}

	.level-input .el-radio {
		height: 32px;
		display: flex;
		align-items: center;
	}

	/* 新增样式 */
	.feature-buttons {
		display: inline-flex;
		margin-right: 15px;
		gap: 8px;
		.feature-btn {
			background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
			border: none;
			color: white;
			border-radius: 4px;
			padding: 8px 12px;
		}
		.feature-btn:hover {
			opacity: 0.9;
			transform: translateY(-1px);
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
		}
	}





	/* 二维码弹窗样式 */
	.qr-code-dialog {
		text-align: center;
		padding: 10px;
	}

	.qr-image {
		width: 200px;
		height: 200px;
		border: 1px solid #eee;
		padding: 10px;
		border-radius: 4px;
	}

	.qr-tip {
		margin-top: 15px;
		color: #606266;
		font-size: 14px;
	}

	/* 响应式调整 */
	@media (max-width: 992px) {
		.feature-buttons {
			display: none;
		}

		/* 可以添加一个下拉菜单用于移动端 */
		.mobile-feature-menu {
			display: block;
		}
	}


	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	body {
		font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
		background-color: #f5f7fa;
		color: #606266;
	}

	.app-container {
		display: flex;
		min-height: 100vh;
	}

	/* 左侧导航 */
	.left-sidebar {
		width: 220px;
		background: linear-gradient(to bottom, #304156, #263445);
		color: #fff;
		/* padding: 20px 0; */
		box-shadow: 2px 0 6px rgba(0, 0, 0, 0.1);
	}

	.logo-area {
		padding: 0 20px 20px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
		margin-bottom: 20px;
	}

	.logo {
		display: flex;
		align-items: center;
		color: white;
		font-size: 18px;
		font-weight: bold;
	}

	.logo i {
		font-size: 24px;
		margin-right: 10px;
	}

	.game-type-switcher {
		padding: 40px 15px;
	}

	.game-button {
		display: flex;
		align-items: center;
		padding: 12px 15px;
		margin-bottom: 8px;
		border-radius: 4px;
		cursor: pointer;
		transition: all 0.3s;
	}

	.game-button:hover {
		background-color: rgba(255, 255, 255, 0.1);
	}

	.game-button.active {
		background-color: #409EFF;
	}

	.game-button i {
		margin-right: 10px;
		font-size: 18px;
	}

	/* 主内容区域 */
	.main-content {
		flex: 1;
		padding: 20px;
		overflow-y: auto;
	}

/* 	.header {
		background: linear-gradient(to right, #39e274, #9c27b0);
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		margin-bottom: 20px;
		border-radius: 4px;
	} */

	.header-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 60px;
		padding: 0 20px;
	}

	.user-info {
		display: flex;
		align-items: center;
		color: white;
	}

	.user-info span {
		margin-right: 15px;
	}

	.feature-buttons {
		display: inline-flex;
		margin-right: 15px;
		gap: 8px;
	}

/* 	.feature-btn {
		background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
		border: none;
		color: white;
		border-radius: 4px;
		padding: 8px 12px;
	} */

	.guide-card,
	.account-card,
	.task-card,
	.success-card,
	.history-card {
		margin-bottom: 20px;
		border-radius: 8px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}

	.guide-header {
		background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
		border-radius: 8px;
		padding: 0px 20px;
		border-left: 4px solid #409EFF;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
	}

	.header-content-inner {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12px 0;
	}

	.title-section {
		display: flex;
		align-items: center;
	}

	.header-icon {
		font-size: 18px;
		color: #409EFF;
		margin-right: 8px;
	}

	.header-title {
		font-size: 16px;
		font-weight: 600;
		color: #303133;
	}

	.guide-button {
		background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
		border: none;
		border-radius: 4px;
		padding: 8px 15px;
		color: white;
		font-weight: 500;
		box-shadow: 0 2px 6px rgba(64, 158, 255, 0.3);
		transition: all 0.3s ease;
		margin-left: 10px;
	}

	.account-content {
		text-align: center;
		padding: 30px 0;
	}

	.account-icon {
		font-size: 48px;
		color: #39e274;
		margin-bottom: 15px;
	}

	.tip-text {
		color: #909399;
		margin: 15px 0;
	}

	.screenshot-uploader {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 15px;
		margin-bottom: 20px;
	}

	.upload-item {
		cursor: pointer;
	}

	.upload-area {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		padding: 20px;
		text-align: center;
		transition: border-color 0.3s;
		height: 120px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.upload-area.large {
		height: 180px;
	}

	.upload-area:hover {
		border-color: #39e274;
	}

	.upload-area i {
		font-size: 28px;
		color: #8c939d;
		margin-bottom: 10px;
	}

	.preview-wrapper {
		position: relative;
		border: 1px solid #d9d9d9;
		border-radius: 6px;
		padding: 8px;
		height: 120px;
	}

	.preview-wrapper.large {
		height: 180px;
	}

	.preview-image {
		width: 100%;
		height: 80px;
		object-fit: contain;
	}

	.preview-wrapper.large .preview-image {
		height: 120px;
	}

	.file-name {
		font-size: 12px;
		color: #606266;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-top: 5px;
	}

	.actions {
		position: absolute;
		top: 5px;
		right: 5px;
		display: none;
	}

	.preview-wrapper:hover .actions {
		display: block;
	}

	.actions i {
		margin-left: 5px;
		cursor: pointer;
		color: #fff;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 50%;
		padding: 3px;
	}

	.payment-uploader {
		cursor: pointer;
		max-width: 300px;
	}

	.success-content {
		text-align: center;
		padding: 40px 0;
	}

	.success-icon {
		font-size: 60px;
		color: #67c23a;
		margin-bottom: 20px;
	}

	.success-tip {
		color: #606266;
		margin: 20px 0;
	}

	.empty-history {
		text-align: center;
		padding: 40px 0;
		color: #909399;
	}

	.empty-history i {
		font-size: 60px;
		margin-bottom: 15px;
	}

	.detail-section {
		margin-bottom: 30px;
	}

	.detail-section h4 {
		margin-bottom: 15px;
		color: #303133;
		border-left: 4px solid #39e274;
		padding-left: 10px;
	}

	.screenshot-item {
		margin-bottom: 15px;
	}

	.screenshot-label {
		text-align: center;
		margin-top: 5px;
		font-size: 12px;
		color: #606266;
	}

	.payment-code {
		text-align: center;
	}

	.image-slot {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		background: #f5f7fa;
		color: #909399;
	}

	.image-slot i {
		font-size: 30px;
	}

	/* 响应式设计 */
	@media (max-width: 992px) {
		.app-container {
			flex-direction: column;
		}

		.left-sidebar {
			width: 100%;
			padding: 10px;
		}

		.game-type-switcher {
			display: flex;
			justify-content: space-around;
			padding: 0;
		}

		.game-button {
			flex-direction: column;
			padding: 8px;
			text-align: center;
			font-size: 14px;
		}

		.game-button i {
			margin-right: 0;
			margin-bottom: 5px;
		}

		.feature-buttons {
			display: none;
		}
	}

	@media (max-width: 768px) {
		.main-content {
			padding: 10px;
		}

		.screenshot-uploader {
			grid-template-columns: repeat(2, 1fr);
		}

		.header-content {
			padding: 0 10px;
		}

		.user-info span {
			display: none;
		}

		.guide-header .header-content-inner {
			flex-direction: column;
			align-items: flex-start;
		}

		.button-group {
			margin-top: 10px;
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
		}
	}

	.announcement-card {
		margin-bottom: 20px;
		border-left: 4px solid #e6a23c;
	}

	.announcement-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.announcement-content {
		line-height: 1.6;
	}

	.announcement-content p {
		margin: 0 0 10px 0;
		font-size: 14px;
		color: #990303;
	}

	.announcement-time {
		font-size: 12px;
		color: #990303;
		text-align: right;
	}

	/* 重要公告样式 */
	.announcement-card.important {
		border-left-color: #f56c6c;
	}

	/* 将公告移到最顶部 */
	.main-content {
		position: relative;
	}

	.announcement-card {
		margin-top: -20px;
		/* 向上移动 */
		margin-bottom: 25px;
		/* 增加与下面内容的间距 */
		position: relative;
		z-index: 10;
	}

	/* 调整左侧边栏位置 */
	.left-sidebar {
		position: fixed;
		left: 0;
		top: 60px;
		/* header高度 */
		height: calc(100vh - 60px);
		z-index: 100;
	}

	.main-content {
		margin-left: 310px;
		/* 侧边栏宽度 */
		width: calc(100% - 220px);
	}

	.uid-input-container {
		border-top: 1px dashed #eaeaea;
		padding-top: 15px;
		margin-top: 15px;
	}

</style>